<style rel="stylesheet/scss" lang="scss" scoped>
</style>

<template>
    <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable size="medium"></el-input>
        <el-tree
            v-loading="dataListLoading"
            node-key="id"
            ref="categorys"
            :data="dataList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :highlight-current = "true"
            @node-click="handleNodeClick">
        </el-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataList: [],
            dataListLoading: true,

            defaultProps: {
                label: 'name',
                children: 'children'
            },

            filterText: "",
        }
    },
    mounted() {
    	this.$nextTick(function () {
	        this.getListWithTree()
    	})
    },
    //监控data中的数据变化
    watch: {
        filterText(val) {
        this.$refs.categorys.filter(val);
        }
    },
    methods: {

        //树节点过滤
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },

        /**
         * 点击事件
         */
        handleNodeClick(data, node, component) {
            //向父组件发送事件；
            this.$emit("tree-node-click", data, node, component);
        },

        async getListWithTree() {
            const res = await this.$http({
                url: '/mall/pmscategory/list/tree',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.dataList = res.data
                this.dataListLoading = false
            }
        }
    }
}
</script>
